<template>
  <el-dialog v-model="show" :destroy-on-close="true" width="70%">
    <ProTable ref="proRef" :pagination="false" :init-param="initParams" :request-api="getConList" :columns="columns">
      <template #tableHeader="scope">
        <el-button type="primary" @click="opera(undefined)" v-auth="'添加内容'">创建</el-button>
        <el-button type="danger" v-auth="'删除内容'" @click="deleteItem(scope.selectedListIds)">删除</el-button>
      </template>
      <template #opera="{ row }">
        <el-button type="primary" link @click="opera(row)" v-auth="'编辑内容'">编辑</el-button>
        <el-button type="primary" link v-auth="'删除内容'" @click="deleteItem([row.id])">删除</el-button>
      </template>
    </ProTable>
    <listManager ref="listRef"></listManager>
  </el-dialog>
</template>

<script setup lang="ts">
import ProTable from "@/components/ProTable/index.vue";
import { reactive, ref } from "vue";
import { getConList, addCon, editCon, deleteCon } from "@/api/modules/common_phrase";
import { ColumnProps } from "@/components/ProTable/interface";
import listManager from "./listManager.vue";
import { useHandleData } from "@/hooks/useHandleData";
const columns: ColumnProps[] = [
  { type: "selection", width: "60" },
  { prop: "chat_text", label: "常用语" },
  { prop: "opera", label: "操作", width: 150 }
];
const proRef = ref<InstanceType<typeof ProTable> | null>();

const initParams = reactive({ category_id: 0 });

const show = ref(false);

const open = (id: number) => {
  initParams.category_id = id;
  show.value = true;
};

const listRef = ref<InstanceType<typeof listManager> | null>();
const opera = (row: any) => {
  const params: any = {
    row: row ? row : { category_id: initParams.category_id, chat_text: "" },
    api: row ? editCon : addCon,
    getTable: proRef.value?.getTableList
  };
  listRef.value?.open(params);
};

const deleteItem = async (ids: any) => {
  try {
    await useHandleData(deleteCon, { ids }, "删除所选内容");
    proRef.value?.getTableList();
  } catch (error) {}
};

defineExpose({ open });
</script>

<style></style>
